<template>
  <div class="magic-square-container">
    <div class="magic-style-one column-1">
      <div
        class="nav-icon module-component-wrapper"
        v-for="(item, index) in navData"
        :key="index"
        @mouseover="childMouseover(childItem,index, $event)"
        :class="{childHover: hoverChildUUID === index}"
      >
        <a  target="_blank">
          <div class="nav-icon-bg">
            <img src="@/assets/images/Robot.png" alt="" />
          </div>
          <div class="nav-icon-text">{{ item.name }}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
// 魔方导航
export default {
  name: "cubeNav",
  props: {
    childItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    commonStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    containerItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      navData: [
        {
          name: "超市便利1",
        },
        {
          name: "超市便利2",
        },
        {
          name: "超市便利3",
        },
        {
          name: "超市便利4",
        },
        {
          name: "超市便利5",
        },
      ],
    };
  },
  computed: {
    // 引用modules模块的state
    ...mapState("modules", [
      "hoverChildUUID",
      "activeElementUUID",
      "parentContainerInfo",
    ]),
    getFindIndex() {
      // return this.containerItem.childNode.findIndex(
      //   (item) => item.uuid === this.hoverChildUUID
      // );
    },
  },
  mounted() {
    console.log(
      "魔方导航页面获取childItem",
      this.childItem,
      this.hoverChildUUID
    );
  },
  methods: {
    ...mapMutations("modules", [
      "setActiveElementUUID",
      "setHoverChildUUID",
      "setParentInfo",
      "setContainerIndex",
    ]),
    childMouseover(childItem,index, e) {
      // 当前被鼠标获取焦点的子节点的ID
      this.setHoverChildUUID(index);
      // 下面非常重要，如果是画板组件，那么就隐藏容器右上角模块的按钮区域
      if (!childItem.module) {
        // 阻止事件冒泡
        if (event) {
          event.stopPropagation();
          event.preventDefault();
        } else {
          window.event.returnValue = false;
          window.event.cancelBubble = true;
        }
      }

      // console.log("子项鼠标悬停之后", childItem, index);
      console.log("hoverChildUUID", this.hoverChildUUID);
    },
  },
};
</script>

<style scoped lang="scss">
.magic-square-container {
  .magic-style-one.column-1 .nav-icon {
    width: 25%;
  }
  .magic-style-one.column-0 .nav-icon {
    width: 20%;
  }
  .magic-style-one {
    padding: 15px;
    text-align: left;
    .nav-icon {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      position: relative;
      vertical-align: top;
      .nav-icon-bg {
        background: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(#8bd3fb),
          to(#4e98f8)
        );
        background: linear-gradient(top, #8bd3fb, #4e98f8);
        width: 45px;
        height: 45px;
        text-align: center;
        margin: 0 auto;
        margin-top: 5px;
        margin-bottom: 10px;
        border-radius: 50%;
        position: relative;
      }
      .nav-icon-text {
        font-size: 12px;
        color: #595959;
        margin-bottom: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
    }
  }
}
</style>
